<template>
	<view class="tui-tips">
		<block>
			<view class="tui-tips-class " :class="tui_show + ' tui-'+position">
				<view class="tui-tips-content" :style="'background-color:' + type ">
					{{msg}}
				</view>
			</view>
		</block>

	</view>
</template>

<script>
	import { mapState} from 'vuex'
	export default {
		computed: {
			...mapState(['tip']),
			tui_show: function()  {
				return this.show ? 'tui-toast-show' : ''
			}
		},
		watch:{
			// 监听
			tip(val, oldVal){
				this.showTips(val)
				this.position = val.position
			}
		},
		data() {
			return {
				timer: null,
				show: false,
				msg: "",
				//translucent,primary,green,warning,danger
				position:'center',
				type:''
			};
		},
		methods: {
			showTips: function(options) {
				const {type,duration} = options;//获取到时间
				clearTimeout(this.timer);
				this.show = true;
				this.type = type;
				this.msg = options.msg;
				this.timer = setTimeout(() => {
					this.show = false;
					clearTimeout(this.timer);
					this.timer = null;
				}, duration);
			}
		}
	}
</script>

<style>
	/*顶部消息提醒 start*/
	.tui-tips-class{
		width: 80%;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
		visibility: hidden;
		position: fixed;
		left: 0;
		right: 0;
		opacity: 0;
		margin: auto;
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: visibility 0.3s ease-in-out,opacity 0.3s ease-in-out;
	}
	.tui-top{
		top: 200rpx;
	}
	.tui-center{
		bottom:0; 
		top: 0;
	}
	.tui-bottom{
		bottom: 100rpx;
	}
	.tui-top-show {
		visibility:hidden;
	}
	.tui-toast-show {
		visibility: visible;
		opacity: 1;
	}

	.tui-tips-content {
		word-wrap: break-word;
		word-break: break-all;
		border-radius: 8rpx;
		padding: 18rpx 30rpx;
		background-color: #63C5F2;
	}

	/*背景颜色 start*/

	.tui-primary {
		background-color: #63C5F2;
	}

	.tui-green {
		background-color: #19be6b;
	}

	.tui-warning {
		background-color: #F5CC45;
	}

	.tui-danger {
		background-color: #F55B45;
	}

	.tui-transparent {
		background-color:transparent;
	}

</style>
